<template>
  <div>
    <div v-if="!(isShowDetail || isShowEditDetail)">
      <jxf-titletip :title="title"  @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="方案名称:" prop="planName">
            <el-input v-model.trim="searchInfo.planName" clearable @keyup.enter.native="onSearch" ref="input-planName"></el-input>
          </el-form-item>
          <!--<el-form-item label="状态:" prop="isDelete">-->
          <!--<el-select v-model="searchInfo.isDelete" clearable placeholder="全部">-->
          <!--<el-option label="生效中" value="1"></el-option>-->
          <!--<el-option label="已失效" value="0"></el-option>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="addDetail()">新增</el-button>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="firstKmPrice" slot-scope="ship">
            <div>￥{{ ship.row.firstKmPrice && ship.row.firstKmPrice != 0 ? formatMoney.twoDecimal(ship.row.firstKmPrice) : '0.00'}}</div>
          </template>
          <template slot="leftKmPrice" slot-scope="ship">
            <div>￥{{ ship.row.leftKmPrice && ship.row.leftKmPrice != 0 ? formatMoney.twoDecimal(ship.row.leftKmPrice) : '0.00'}}</div>
          </template>
          <template slot="createTime" slot-scope="ship">
            <div>{{ship.row.createTime ? FormatDate.timeFormat(ship.row.createTime) : ""}}</div>
          </template>
          <template slot="isDelete" slot-scope="ship">
            <div v-if="ship.row.isDelete === 0">生效中</div>
            <div v-if="ship.row.isDelete === 1">已失效</div>
          </template>
          <template slot="operation" slot-scope="ship">
            <el-button type="text" @click="watchDetail(ship.row.id)">查看</el-button>

          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <CompanySetting v-if="isShowDetail" :dataInfo="dataInfo" @goBack="goBack"></CompanySetting>
    <EditSetting v-if="isShowEditDetail" :dataInfo="dataInfo" @goBack="goBack" @fresh="fresh"></EditSetting>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  import CompanySetting from './components/CompanySetting'
  import EditSetting from './components/EditSetting'
  export default {
    name: "SubsidiaryShipSetting",
    components: { CompanySetting, EditSetting },
    data() {
      return {
        title: "运费设置",
        searchInfo: {
          planName: ""
        },
        isShowEditDetail: false,
        isSuccess: false,
        dataInfo: {},
        isShowDetail: false,
        formatMoney: formatMoney,
        FormatDate: FormatDate,
        dataTable: {
          border:true,
          loading:false,
          hasSelect:false,
          tr: [
            {
              id: '2',
              label: '方案名称',
              minWidth: '140',
              prop: 'planName'
            },
            {
              id: '3',
              minWidth: '160',
              label: '基础共计（公里）',
              prop: 'firstKm'
            },
            {
              id: '4',
              minWidth: '120',
              label: '运费（元）',
              show: 'template',
              prop: 'firstKmPrice'
            },
            {
              id: '5',
              minWidth: '160',
              label: '增加公里（公里）',
              prop: 'leftKm'
            },
            {
              id: '6',
              minWidth: '120',
              label: '增加运费（元）',
              show: 'template',
              prop: 'leftKmPrice'
            },
            {
              id: '7',
              label: '设置时间',
              show: 'template',
              width: '160',
              prop: 'createTime'
            },
            {
              id: '8',
              label: '状态',
              show: 'template',
              prop: 'isDelete'
            },
            {
              id: '9',
              label: '操作',
              show: 'template',
              fixed: 'right',
              minWidth:"80",
              prop: 'operation'
            }
          ],
          data: []
        },
        pageTotal:0,
        pageSize:10,
        currentPage:1
      }
    },
    methods: {
      fresh() {
        this.getData()
      },
      // 导出
      exportExcel() {
        this.isSuccess = true;
        let data = {
          ...this.searchInfo,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
        ajax.export(apis.setting.exportFreight, data).then((res) => {
          this.isSuccess = false;
          if(res.code) {
            if(res.code === "10000000") {

            } else {
              this.$message.error(res.message)
            }
          }
        })
      },
      refreshFuc() {
        this.resetForm('searchInfo')
        this.currentPage = 1;
        this.pageSize = 10;
        this.getData()
      },
      goBack() {
        this.isShowDetail = false;
        this.isShowEditDetail = false;
      },
      watchDetail(id) {
        let data = {
          id: id
        }
        ajax.get(apis.setting.getCompanyShip, data).then(result => {
          if(result.code == "10000000") {
            this.dataInfo = result.data;
            this.isShowDetail = true
          } else {
            this.$message.error(result.message)
          }
        })
      },
      addDetail() {
        this.dataInfo = {};
        this.isShowEditDetail = true
      },
      getData() {
        this.dataTable.loading = true
        let data = {
          ...this.searchInfo,
          page: this.currentPage,
          pageSize: this.pageSize
        }
        ajax.post(apis.setting.getPlatformList, data).then(result => {
          if(result.code == "10000000") {
            this.dataTable.data = result.data.dataList;
            this.pageTotal = result.data.total;
          } else {
            this.$message.error(result.message)
          }
          this.dataTable.loading = false
        })
      },
      onSearch() {
        this.currentPage = 1;
        this.getData()
      },
      enterNextInput(inputName) {
        this.$refs["input-" + inputName].focus();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getData()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getData()
      },
    },
    created() {
      this.onSearch()
    }
  }
</script>

<style scoped>

</style>
